<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<title>HPT API调试工具</title>
	<style type="text/css">
		body { word-wrap: break-word; }
		main { width: 50%; margin: 20px auto;  }
	    a:link, a:visited, a:hover, a:active { display: inline-block;  }
		#wrapper .row { margin: 0 0 10px 0; padding: 0; width: 100%; }
		#wrapper .row select, .row input, #wrapper .row textarea, .row .link { width: 80%; }
		a.link { word-wrap: break-word; word-break: break-word; } 
		.row label { width: 8em; display: inline-block; }
		.row-btn { text-align: center; padding: 0; }
		.row-btn button { margin-right: 10px; }
		#remoteData { min-height: 10em; border: 1px solid #eee; padding: 1em; }
	</style>
</head>
<body>
	<main>
		<h1>HPT API调试工具</h1>
		<div id="wrapper">
			<div class="row">
				<label>密钥</label>
				<input type="text" name="secretKey" id="secretKey" value="HPTSecKey(*%@)">
			</div>

			<div class="row">
				<label>模式</label>
				<select name="mode" id="modes">
					<option value="ecb">ecb</option>
				</select>
			</div>

			<div class="row">
				<label>算法</label>
				<select name="algorithm" id="algorithms">
					<option value="tripledes">tripledes</option>
				</select>
			</div>

			<div class="row">
				<label>API地址</label>
				<input type="text" name="apiAddr" id="apiAddr" value="http://128.1.36.118/gw/index">
			</div>

			<div class="row">
				<label>完整URL</label>
				<a id="apiFullAddr" class="link" href="http://128.1.36.118/gw/index" target="_blank">http://128.1.36.118/gw/index</a>
			</div>

			<div class="row">
				<label>接口</label>
				<select id="apiList">
					<option value='{"uname":"trump","act":"inGame", "game":"haochepiaoyi"}'>inGame</option>
					<option value='{"uname":"trump","act":"recharge","method":"out","ordNo":"181109150102120", "money":100}'>recharge</option>
					<option value='{"uname":"trump","act":"chkRecharge","ordNo":"181109150102120"}'>chkRecharge</option>
					<option value='{"uname":"trump","act":"getMoney"}'>getMoney</option>
					<option value='{"uname":"trump","act":"dama","lastTime":"2018-01-01 00:00:01"}'>dama</option>
				</select>
			</div>

			<div class="row">
				<label>方法</label>
				<select name="apiMethod" id="apiMethod">
					<option value="GET">GET</option>
					<option value="POST">POST</option>
					<option value="PUT">PUT</option>
					<option value="DELETE">DELETE</option>
				</select>
			</div>

			<div class="row">
				<label>site</label>
				<input type="text" name="siteName" id="siteName" value="site01">
			</div>

			<div class="row">
				<label>params明文</label>
				<textarea name="plainText" id="plainText" cols="30" rows="10"></textarea>
			</div>

			<div class="row">
				<label>params密文</label>
				<textarea name="cryptText" id="cryptText" cols="30" rows="10"></textarea>
			</div>

			<div class="row row-btn">
				<button id="btnEncrypt">加密</button>
				<button id="btnDecrypt">解密</button>
				<button id="btnEncryptAccess">加密并请求</button>
			</div>

			<div class="row">
				<label>返回</label>
				<div id="remoteData"></div>
			</div>
		</div>
	</main>
<script>
var eleSecretKey = document.getElementById('secretKey');
var eleModes = document.getElementById('modes');
var eleAlgorithms = document.getElementById('algorithms');
var eleText = document.getElementById('plainText');
var eleCryptText = document.getElementById('cryptText');
var btnEncrypt = document.getElementById('btnEncrypt');
var btnDecrypt = document.getElementById('btnDecrypt');
var btnEncryptAccess = document.getElementById('btnEncryptAccess');
var apiAddr = document.getElementById('apiAddr');
var apiFullAddr = document.getElementById('apiFullAddr');
var apiMethod = document.getElementById('apiMethod');
var apiList = document.getElementById('apiList');
var siteName = document.getElementById('siteName');
var remoteData = document.getElementById('remoteData');

var secretKey = encodeURIComponent(eleSecretKey.value);
var url = 'do.php?&rnd=' + Math.random();

window.onload = function(){
	var urlModes = url + '&act=list_modes';
	HttpRequest.get(urlModes, function(retData){
		if (retData.err){
			alert(retData.msg);
			return false;
		}
		eleModes.innerHTML = '';
		var selected = '';
		for (var idx in retData){
			if (retData[idx] == 'ecb'){
				selected = 'selected';
				eleModes.innerHTML += '<option value="' + retData[idx] + '" ' + selected +  '>' + retData[idx] + '</option>';
			} else {
				eleModes.innerHTML += '<option value="' + retData[idx] + '">' + retData[idx] + '</option>';
			}
		}
		apiList.onchange();
	});
};

btnEncrypt.onclick = function(e){
	if (eleText.value == ''){
		alert('明文不得为空');
		return false;
	}
	
	var encData = 'act=encrypt&secretKey=' + secretKey + '&mode=' + eleModes.value + '&algorithm=' + eleAlgorithms.value + 
				  '&plainText=' + eleText.value + '&rnd=' + Math.random();
	HttpRequest.post(url, encData, function(retData){
		if (retData.err){
			alert(retData.msg);
			return false;
		}
		eleCryptText.value = retData.msg;
		var fullUrl = apiAddr.value + '?site=' + siteName.value + '&params=' + retData.msg;
		apiFullAddr.innerText = fullUrl;
		apiFullAddr.setAttribute('href', fullUrl);
	});
	return false;
};

btnEncryptAccess.onclick = function(){
	btnEncrypt.onclick();
	var method = apiMethod.value || 'GET';
	url += '&act=catchData&remoeUrl=' + apiFullAddr.getAttribute('href') + "&method=" + method + '&rnd=' + Math.random();
	HttpRequest.get(url, function(retData){
		if (retData.err){
			alert(retData.msg);
			return false;
		}
		remoteData.innerHTML = retData.msg;
	}, function(errData){
		alert(errData.msg);
	});
}

btnDecrypt.onclick = function(e){
	if (eleCryptText.value == ''){
		alert('密文不得为空');
		return false;
	}
	var encData = 'act=decrypt&secretKey=' + secretKey + '&mode=' + eleModes.value + '&algorithm=' + eleAlgorithms.value + '&secretText=' + eleCryptText.value + '&rnd=' + Math.random();
	HttpRequest.post(url, encData, function(retData){
		if (retData.err){
			alert(retData.msg);
			return false;
		}
		eleText.value = retData.msg;
	});
	return false;
};

eleModes.onchange = function(){
	var urlModes = url + '&act=list_mode_algorithms&mode=' + eleModes.value;
	HttpRequest.get(urlModes, function(retData){
		eleAlgorithms.innerHTML = '';
		for (var data in retData){
			eleAlgorithms.innerHTML += '<option value="' + retData[data] + '">' + retData[data] + '</option>';
		}
	});
};

apiList.onchange = function(){
	eleText.value = this.value;
	btnEncrypt.onclick();
};

function display(jsonData, remoteData, level){
	var html = ''
	try{
		jsonData = JSON.parse(jsonData);
		for (var keyo in jsonData['data']){
			remoteData.innerHTML += '&nbsp;'.repeat(level * 4) + keyo + ': ' + jsonData['data'][keyo] + '<br>';
			display(jsonData['data'][keyo], remoteData, level * 4);
		}
	}catch(ee){
		remoteData.innerHTML += '&nbsp;'.repeat(level * 4) + jsonData[key] + '<br>';
	}
}
</script>
<script src="js/HttpRequest.js"></script>
</body>
</html>

